/*
  // 返回一个颜色是10% *比@颜色浅*
  lighten(@color_n, 10%);
  // 返回一个颜色是10% *深*比@色
  darken(@color_n, 10%);
  // 返回一个颜色10% * *饱和比@色
  saturate(@color_n, 10%);
  // 返回一个颜色10% *不*饱和比@色
  desaturate(@color_n, 10%);
  // 返回一个颜色10% *不*透明颜色比@
  fadein(@color_n, 10%);
  // 返回一个颜色10% * *透明颜色比@
  fadeout(@color_n, 10%);
  // 返回一个比“颜色”更大的10度的颜色
  spin(@color_n, 10);
*/
// zindex
@z-loading: 900;
@z-head: 50;
@z-foot: 100;
@z-fixbuttonline: @z-foot+5;
@z-main: 5;
@z-cont-widget: @z-main+5;
@z-win: @z-cont-widget + 5;
@z-mask: 200;
@z-alert: 300;
//文字设置
@font: arial, Kailasa, 'Microsoft YaHei', 'STHeiti', 'STHeiti Light', 'Hiragino Sans GB', sans-serif;
@line_height: 1.6;
//glaobal size setting
@app_tab_height: 4.2rem;
@app_btn_height: 4.3rem;
@app_head_height: 4.4rem;
@app_foot_height: 5rem;
@app_foot_icon: 3.2rem;
@app_foot_font: 1.2rem;
//元素间距
@space: .5rem;
//颜色设置
@color_bg: #f4f4f4; //网页背景色
@color_skin: #0099ff; //皮肤
@color_err: #ff5555; //皮肤
@color_w: #fff; //最浅色
@color_h: #dedede; //浅灰
@color_g: #888; //中性灰
@color_gn: #bbb; //中性灰
@color_n: #333; //常规灰
@color_link: @color_n;
//border setting
@border_w: 1px @color_w solid;
@border_h: 1px solid lighten(@color_h, 7.5%); //浅边框
@border_gn: 1px @color_gn solid; //深边框
@border_n: 1px lighten(@color_n, 25%) solid; //默认边框
@border_skin: 1px @color_skin solid; //皮肤色边框
//radius setting
.radius_a(@radius:@space/2) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}
.radius_t(@radius:@space/2) {
  -moz-border-radius: @radius @radius 0 0;
  -webkit-border-radius: @radius @radius 0 0;
  border-radius: @radius @radius 0 0;
}
.radius_b(@radius:@space/2) {
  -moz-border-radius: 0 0 @radius @radius;
  -webkit-border-radius: 0 0 @radius @radius;
  border-radius: 0 0 @radius @radius;
}
.radius_l(@radius:@space/2) {
  -moz-border-radius: @radius 0 0 @radius;
  -webkit-border-radius: @radius 0 0 @radius;
  border-radius: @radius 0 0 @radius;
}
.radius_r(@radius:@space/2) {
  -moz-border-radius: 0 @radius @radius 0;
  -webkit-border-radius: 0 @radius @radius 0;
  border-radius: 0 @radius @radius 0;
}
.an_time(@time:.5s) {
  animation-duration: @time;
  -webkit-animation-duration: @time;
}
.boxshow {
  box-shadow: 0 2px 3px @color_h;
}
.skinboxshow {
  box-shadow: 0 3px 5px darken(@color_skin, 5%);
}
.block(@size:1rem) {
  width: @size;
  height: @size;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.transition(@time:.3s,@cssName:width) {
  transition-duration: @time;
  transition-property: @cssName;
}
.transform(@deg:45deg) {
  transform: rotate(@deg);
  -webkit-transform: rotate(@deg);
}
.ablock{
  content: '';
  display: block;
  position: absolute;
  overflow: hidden;
}